[CSS] 텍스트 및 링크에 밑줄 표시 및 마우스를 올릴 경우 밑줄

텍스트에 CSS를 사용하여 다양한 스타일을 적용할 수 있습니다. 굵기, 색상등을 변경하는 방법도 많이 쓰이지만 이외에 밑줄선, 취소선등의 스타일 부여도 가능합니다. CSS를 사용한 text 스타일 추가방법에 대하여 자세히 알아보겠습니다.

# text-decoration 속성으로 텍스트 스타일 변경

아래는 CSS를 사용해 텍스트에 밑줄, 윗줄 또는 취소선(가운데선)등을 사용하는 CSS 방법입니다. text-decoration 속성을 사용할 경우 이와 같은 스타일 구현이 가능합니다. 이 속성은 다음과 같은 값을 지정할 수 있습니다. 아래는 선택가능한 옵션입니다.

i. underline(언어라인)
ii. overline(윗줄라인)
i. line-through(가운데라인)
iv. none(스타일해제)


그렇다면 이 속성을 사용한 예제를 사용해 더 자세하게 알아보겠습니다. 아래는 text 클래스를 가진 요소에 text-decoration을 사용해 다양한 효과를 부여한 예제소스입니다. 먼저 html 코드입니다.

아래는 css 파일의 코드입니다.
위 코드를 실행하면 각각 아래와 같이 다양한 결과가 나타나게됩니다.


text-decoration 속성에 스타일 부여 예제
// 언더라인(아래줄) 스타일 부여

text-decoration 속성에 스타일 부여 예제
// 윗줄 스타일 부여

text-decoration 속성에 스타일 부여 예제
// 취소선(가운데선) 스타일 부여

text-decoration 속성에 스타일 부여 예제
// 스타일 없음(모두 해제)

# 텍스트의 링크에 밑줄 추가하기

다음은 마우스를 올렸을 경우 밑줄을 추가하는 방법에 대하여 알아보려 합니다. 스크립트를 사용하는 방법 역시 존재하나 CSS를 사용하는 방법이 가장 간편합니다. CSS의 선택자 중에는 의사 클래스가 존재하며 의사 클래스를 적용할 경우 마우스를 올리는 등의 사용자 액션에 따른 스타일 적용이 가능합니다. 우선 사용 가능한 의사클래스는 아래처럼 4가지가 있습니다.

i. :hover
ii. :visited
iii. :hover
iv. :active

맨처음에 나온 :hover 를 CSS에 사용하게되면 마우스를 대상 엘리먼트의 위에 위치했을 때 발생하는 스타일 적용이 가능합니다. 아래의 예제를 보시기 바랍니다.

@ a_style.html

@ a_sytle.css

아래는 이 코드를 실제로 적용한 코드입니다. 실제로 마우스를 올려보세요!


마우스를 올려주세요!

이처럼 언더라인(아래줄) 스타일 추가되었습니다.

# 언더라인(underline)의 간격 조정이 필요한 경우

CSS를 사용한 경우 언더라인이 생기나 이 언더라인의 위치나 두께등을 조정하기 어렵습니다. 이 경우 :after 의사클래스선택자(Pseudo class)를 사용하여 해결하는 방법이 있습니다. 아래 코드는 동일한 언더라인을 만들어 주며 원하는 다양한 스타일 추가 지정이 가능한 방법입니다.


예제보기 - 밑줄 쓰윽



위 예제는 css를 사용하여 다양한 스타일 주었습니다. 밑줄에 빨간색, 아래로 20px 간격, 두께 3px이 그것입니다. 어떻게 구현하였을까요? 아래의 코드를 참고하세요.
@ underline.html

다음은 css 파일입니다.
@underline.css

여기까지 다양한 방법들에 대하여 알아보았습니다.